import React from 'react';
import { ListView, Avatar, Icon, Modal, Toast, Tools } from 'weaver-mobile';
import { withRouter } from 'react-router-dom';
import { toJS } from 'mobx';
import app from '../../../apis/app';
import { TIPS_MSG } from '../../../constants/form';
import Loading from '../../../common/loading';
import './index.less';

const alert = Modal.alert; 
const getLabel = Tools.getLabel; 

@withRouter
export default class UnSubmitPersonList extends React.Component {
  constructor(props) {
    super(props);

    const dataSource = new ListView.DataSource({
      rowHasChanged: (row1, row2) => row1 !== row2,
    });

    const appid = props.match.params.id;
    const { location } = props;
    const { date } = location;
    this.state = {
      dataSource: dataSource.cloneWithRows([]),
      appid,
      datas: [],
      pageNo: 1,
      pageSize: 20,
      date: date,
      managerRight: false,
      oaAuthority: false,
      appName: '',
      hasInit: false
    }
  }

  componentDidMount() {
    const { appid, dataSource, pageSize, date } = this.state;

    Promise.all([
      app.getUnSubmitUserInfo(appid, date),
      app.getBaseInfo(appid)
    ]).then(([res, app]) => {
      this.setState({
        dataSource: dataSource.cloneWithRows(res.slice(0, pageSize) || []),
        datas: res,
        managerRight: app.managerRight,
        oaAuthority: app.oaAuthority,
        appName: app.name,
        hasInit: true
      })
    })
  }

  onEndReached = () => {
    let { pageNo, pageSize, dataSource, datas } = this.state;

    this.setState({
      pageNo: pageNo + 1,
      dataSource: dataSource.cloneWithRows(datas.slice(0, (pageNo + 1) * pageSize))       
    });
  }

  onRemindConfirm = () => {
    const { appid, appName, date } = this.state;
    const data = { date, appid, type: 'MSGCENTER', receiver: 'ALL', title: getLabel(523313, '请填写收集表单') + '：' + appName, content: getLabel(523314, '点击打开表单进行填写') };
    Toast.loading(TIPS_MSG.PROCESSING, 0);
    app.fillinRemind(data).then(() => {
      Toast.hide();
      Toast.success(getLabel(523251, "操作成功"), 1);
    });
  }

  renderRow = (rowData) => (
    <li>
      <Avatar url={rowData.messageurl} name={rowData.lastname} userId={rowData.id}/>
      <div className='person-info'>
          <span className='person-name'>{rowData.lastname || rowData.name}</span>
          <span className='person-department'>{`${rowData.subCompanyName}${rowData.departmentName}`}</span>
        </div>
    </li>
  )

  back = () => {
    const { appid } = this.state;

    this.props.history.push(`/form/statistics/${appid}`);
  }

  render () {
    const { dataSource, datas, managerRight, appid, hasInit, oaAuthority } = this.state;
    return (
      <div className='unsubmit'>
        {
          !hasInit ? 
          <Loading loading={true} content={getLabel(523315, '加载中...')} className='unsubmit-loading'/> :
          <React.Fragment>
            <div className='header'>
              <span onClick={this.back} >
                <Icon type='left' size='xs'></Icon>
                {datas.length}{getLabel(523316, '人未填写')}
              </span>
              {
                (datas.length > 0 && managerRight && oaAuthority) && <span
                className='remind-unsubmit-member'
                onClick={() =>
                  {
                    this.props.history.push(`/form/remind/${appid}`)
                  }
                }
              >
                {getLabel(523490, '提醒填写人员')}
              </span>
              }
            </div>
            <div className='person-list'>
              <ListView 
                style={{
                  height: '100%',
                  overflow: 'auto',
                }}
                dataSource={toJS(dataSource)}
                onEndReachedThreshold={20}
                onEndReached={this.onEndReached}
                initialListSize={20}
                renderRow={this.renderRow}
              />
            </div>
          </React.Fragment>
        }
      </div>
    ) 
  }
}